{% load staticfiles %}
<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">

    <link rel="icon" href="https://www.isky.one/favicon.ico">
    <title>{% block title %}{% endblock title %}</title>
    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    
    <!-- 通过自有函数输出HTML头部信息 -->
    <meta name="description" content="LuckyDog幸运儿">
    <meta name="keywords" content="luckydog,luckydog幸运儿,博客,luckywords,幸运字,luckywords幸运字,blog">
	
</head>

<body>
    <br>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">{{ nav_title }}</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        {% for nav in navigations %}
                            <li><a href="{{ nav.url }}">{{ nav.nav }}</a></li>
                        {% endfor %}

                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="/admin/">后台管理</a></li>
                                <li><a href="{% url 'feedback' %}">联系</a></li>
                                {% if user.is_authenticated %}
                                    <li><a href="{% url 'user_dropdown' %}">注销</a></li>
                                {% else %}
                                    <li><a href="{% url 'user_register' %}">注册</a></li>
                                    <li><a href="{% url 'user_login' %}">登录</a></li>
                                {% endif %}
                            </ul>
                        </li>
                    </ul>

                </div>
            </div>
        </nav>
    </div>

    <div class="container">
        <div class="row row-offcanvas row-offcanvas-right">
			<!-- 
				移动设备xs
				平板电脑sm
				笔记本md
				电脑lg
			-->
            <!-- 内容变化区域，首页展示与具体内容 Begin block main-->
            {% block main %}
            {% endblock main %}
            <!-- 内容变化区域，首页展示与具体内容 End block main-->

			<!-- 搜索框 -->
			<div class="col-xs-12 col-sm-3 sidebar-offcanvas">
				<form id="search" method="get" action="{% url 'article_search' %}?keyword=" onsubmit="return check()" role="search">
					<div class="input-group">
					  <input type="text" class="form-control" id="input" name="keyword" placeholder="" />
					  <span class="input-group-btn">
						<button class="btn btn-default" type="submit">Go!</button>
					  </span>
					</div>
				</form>
			</div>
            <!-- 右侧 -->
            <div class="col-xs-6 col-sm-3 sidebar-offcanvas hidden-xs" id="sidebar">
                <!-- 最新文章 -->
                <div id="sidebar">
                    <h4>最新文章</h4>
                    <div class="list-group">
                        {% for article in latestArticles %}
                        <a href="{% url 'article_detail' article.id %}"
                           class="list-group-item">{{ article.title }}</a>
                        {% endfor %}

                    </div>
                </div>
                <!-- 分类 -->
                <div id="sidebar">
                    <h4>分类</h4>
                    <div class="list-group">
                        {% for category in categories %}
                        <a href="{% url 'article_category' category.category %}" class="list-group-item">{{ category.category }}</a>
                        {% endfor %}
                    </div>
                </div>
			    <!-- 其他 -->
                <div id="sidebar">
                    <h4>其他</h4>
                    <div class="list-group">
                    <!-- 判断是否需要登录 -->
                        {% if user.is_authenticated %}
                            <a href="{% url 'user_dropdown' %}" class="list-group-item">注销</a>
                        {% else %}
                            <a href="{% url 'user_register' %}" class="list-group-item">注册</a>
                            <a href="{% url 'user_login' %}" class="list-group-item">登录</a>
                        {% endif %}
                        <a href="/admin/" class="list-group-item">管理</a>
                    </div>
                </div>
            </div>
        </div>

        <hr>
        <footer>
				<p style="float:left">{{ copyright }}</p>
				<p style="float:right">
                    <a href="https://beian.miit.gov.cn/" target="_blank" style="color: black;text-decoration: none;">
                        {{ beian }}
                    </a></p>
        </footer>

    </div>
    <!--/.container-->

    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

    <script>
        $(document).ready(function() {
            // 聚焦
            $('#title').select();

            // 缩略名自适应宽度
            var slug = $('#slug');

            if (slug.length > 0) {
                var wrap = $('<div />').css({
                        'position': 'relative',
                        'display': 'inline-block'
                    }),
                    justifySlug = $('<pre />').css({
                        'display': 'block',
                        'visibility': 'hidden',
                        'height': slug.height(),
                        'padding': '0 2px',
                        'margin': 0
                    }).insertAfter(slug.wrap(wrap).css({
                        'left': 0,
                        'top': 0,
                        'minWidth': '5px',
                        'position': 'absolute',
                        'width': '100%'
                    })),
                    originalWidth = slug.width();

                function justifySlugWidth() {
                    var val = slug.val();
                    justifySlug.text(val.length > 0 ? val : '     ');
                }

                slug.bind('input propertychange', justifySlugWidth);
                justifySlugWidth();
            }
        });

        let input = document.getElementById("input");
        function check() {
            {#let content = document.getElementById('input').value;#}
            input.placeholder = "不能为空";
            return input.value !== "";
        }

        {#来一个搜索框的打字效果#}
        let i = 0, timer =0,flag=true;
        let str1="Search for...", str2="不能为空", str="";
        function typing() {
            str = str1;
            {#str = flag ? str1 : str2;#}
            if(i <= str.length){
                input.placeholder = str.slice(0,i++)+"_";
                timer=setTimeout(typing,200);
            }else{
                /*i = 0;
                flag = !flag;
                console.log(flag);console.log(str);
                input.placeholder = "";
                setTimeout(typing,200);*/
                input.placeholder = str;
                clearTimeout(timer);
            }
        }
        typing()
    </script>
</body>
</html>